var that;
class Tab{
    constructor(id){
        that = this;
        /* 切换和增删改差功能 */
        // get id
        this.main = document.querySelector(id);//get Bigbox by id
        this.lis = this.main.getElementsByTagName("li");//加了this.main说明是获取Bigbox里面的li元素
        this.sections = this.main.querySelectorAll('section');
        this.add = this.main.querySelector('.tabAdd');
        this.init();


    }
    // init 初始化操作让相关元素绑定事件
    init (){
        this.add.onclick = this.addTab; 
        for(var i = 0; i< this.lis.length;i++){
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;/* 点击完再调用，不需要加小括号 */
        }
    }
    toggleTab(){
        that.clearClass();
        /*  toggleTab的调用者对象是lis */    
        /* console.log(this.index); */
       this.className = 'liActive';
       that.sections[this.index].className = 'conActive';
    }
    clearClass(){
        for(var i = 0; i< this.lis.length;i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
            
        }
    }
    addTab(){
        alert(11);
    }
    removeTab(){

    }
    editTab(){

    }
    
}
 new Tab('#tab');

